<template>
  <view class="content-mine">
    <!-- <view class="title" :style="{paddingTop: statusBarHeight+10+'px'}">
            <image src="../static/image/logo.png" />
            智慧原水
        </view> -->
    <view v-if="error" style="text-align: center">下拉刷新试试</view>
    <view class="name">{{ user.name }}，欢迎您登录！</view>
    <view class="wrap">
      <view
        class="item"
        v-for="(item, index) in power"
        :key="index"
        v-if="item.flag"
        @click="goUrl(item.url)"
      >
        <image :src="`../static/image/${item.icon}.png`" />
        <view>{{ item.name }}</view>
      </view>
    </view>
    <!-- <video src="rtsp://3.84.6.190/vod/mp4:BigBuckBunny_115k.mov" style="width: 400px;height: 300px;"></video> -->
    <view class="btn" @click="out"> 退出登录 </view>
  </view>
</template>

<script>
import API from "@/common/api.js";
var mpaasScanModule = null;
export default {
  data() {
    return {
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,

      token: uni.getStorageSync("token"),
      user: uni.getStorageSync("user"),
      pzhAuthorization: uni.getStorageSync("pzhAuthorization"),
      power: [
        {
          icon: "address",
          name: "管网GIS",
          url: "map",
          flag: false,
        },
        {
          icon: "gy",
          name: "原水工艺图",
          url: "gy?flag=true",
          flag: false,
        },
        {
          icon: "moxing",
          name: "运行总览图",
          url: "slmx",
          flag: false,
        },
        {
          icon: "baobiao",
          name: "统计报表",
          url: "report",
          flag: false,
        },
        {
          icon: "liuliang",
          name: "运行监测（一）",
          url: "monitor",
          flag: false,
        },
        {
          icon: "liuliang",
          name: "运行监测（二）",
          url: "wdp",
          flag: false,
        },
        {
          icon: "inspection",
          name: "巡检",
          url: "inspection",
          flag: false,
        },
        {
          icon: "weiyi",
          name: "位移监测",
          url: "displacement",
          flag: false,
        },
        {
          icon: "wq",
          name: "水质监测",
          url: "waterQuality",
          flag: false,
        },
        {
          icon: "xielou",
          name: "实时检漏",
          url: "jianlou",
          flag: false,
        },
        {
          icon: "yingji",
          name: "应急事件",
          url: "urgentList",
          flag: false,
        },

        {
          icon: "car",
          name: "派车单",
          url: "carOrder",
          flag: false,
        },
        {
          icon: "saoma",
          name: "扫描设备",
          url: "equipmentDetails",
          flag: false,
        },
      ],
      error: false,
    };
  },
  onShow() {
    uni.closeSocket();
    setTimeout(() => {
      try {
        plus.screen.lockOrientation("portrait-primary");
      } catch (e) {}
    }, 100);
  },
  onLoad(options) {
    //#ifdef APP-PLUS
    if (uni.getSystemInfoSync().platform != "ios") {
      mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
    }
    //#endif
    this.getData();
  },
  onPullDownRefresh() {
    if (this.error) {
      this.getData();
    } else {
      uni.stopPullDownRefresh();
    }
  },
  methods: {
    getData() {
      API.appMenu({
        userId: this.user.userId,
      }).then((res) => {
        uni.hideLoading();
        uni.stopPullDownRefresh();
        this.error = true;
        if (res && res.length) {
          this.error = false;
          res.forEach((item) => {
            if (item.name == "管网GIS") {
              // this.power[0].flag = true
            } else if (item.name == "原水工艺图") {
              this.power[1].flag = true;
            } else if (item.name == "水力平差") {
              this.power[2].flag = true;
            } else if (item.name == "报表") {
              this.power[3].flag = true;
            } else if (item.name == "运行监控") {
              this.power[4].flag = true;
            } else if (item.name == "分水口流量监测") {
              this.power[5].flag = true;
            } else if (item.name == "巡检") {
              this.power[6].flag = true;
            } else if (item.name == "gnss位移监测") {
              this.power[7].flag = true;
            } else if (item.name == "水质监测") {
              this.power[8].flag = true;
            } else if (item.name == "实时检漏") {
              // this.power[9].flag = true
            } else if (item.name == "派车单") {
              this.power[11].flag = true;
            }
            this.power[12].flag = true;
          });
        }
      });
    },
    goUrl(url) {
      if (url == "equipmentDetails") {
        if (mpaasScanModule) {
          mpaasScanModule.mpaasScan(
            {
              // 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
              scanType: ["qrCode"],
              // 是否隐藏相册，默认false不隐藏
              hideAlbum: false,
            },
            (res) => {
              if (res.resp_code == 1000) {
                try {
                  let data = JSON.parse(res.resp_result);
                  if (data.sn) {
                    this.selectSbtz(data.sn, url);
                  } else {
                    uni.showToast({
                      title: "请扫描正确的设备二维码",
                      duration: 2000,
                      icon: "none",
                    });
                  }
                } catch (err) {
                  uni.showToast({
                    title: "请扫描正确的设备二维码",
                    duration: 2000,
                    icon: "none",
                  });
                }
              }
            }
          );
        } else {
          uni.scanCode({
            scanType: ["qrCode"],
            success: (res) => {
              console.log(res, "www");
              if (res.errMsg == "scanCode:ok") {
                try {
                  let data = JSON.parse(res.result);
                  console.log(data, "====");
                  if (data.sn) {
                    this.selectSbtz(data.sn, url);
                  } else {
                    uni.showToast({
                      title: "请扫描正确的设备二维码",
                      duration: 2000,
                      icon: "none",
                    });
                  }
                } catch (err) {
                  uni.showToast({
                    title: "请扫描正确的设备二维码",
                    duration: 2000,
                    icon: "none",
                  });
                }
              }
            },
          });
        }
      } else {
        uni.navigateTo({
          url,
        });
      }
    },
    selectSbtz(sn, url) {
      API.selectSbtz({
        pzhAuthorization: this.pzhAuthorization,
        flag: "info",
        canDel: 0,
        sbbm: sn,
      }).then((res) => {
        if (res.resCode == "success") {
          uni.hideLoading();
          if (res.datas.length) {
            uni.setStorage({
              key: "equipmentSubsidiaryData",
              data: res.datas[0],
            });
            uni.navigateTo({
              url,
            });
          } else {
            uni.showToast({
              title: "未查询到相关数据",
              duration: 2000,
              icon: "none",
            });
          }
        }
      });
    },
    out() {
      uni.showModal({
        title: "提示",
        content: "确定要退出登录吗？",
        success: (res) => {
          if (res.confirm) {
            uni.setStorage({
              key: "token",
              data: "",
            });
            uni.reLaunch({
              url: "../pages/login",
            });
          } else if (res.cancel) {
          }
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.content-mine {
  font-size: 28rpx;
  min-height: 100vh;
  background-color: white;
  .title {
    display: flex;
    justify-content: center;
    padding: 10rpx 0;
    background: #01b7fc;
    font-size: 34rpx;
    color: white;
    image {
      width: 32rpx;
      height: 32rpx;
      display: block;
      margin: 18rpx 10rpx 0 0;
    }
  }
  .name {
    padding-top: 20rpx;
    text-align: center;
  }
  .wrap {
    display: flex;
    flex-wrap: wrap;
    text-align: center;

    .item {
      width: 33.33vw;
      padding-top: 40rpx;

      image {
        width: 100rpx;
        height: 100rpx;
      }
    }
  }

  .btn:active {
    background: #1296db;
  }

  .btn {
    margin-left: 40rpx;
    position: absolute;
    bottom: 100rpx;
    background: #00b9f9;
    border-radius: 30rpx;
    padding: 20rpx 0;
    width: calc(100vw - 80rpx);
    display: flex;
    justify-content: center;
    color: white;
    font-size: 26rpx;
    line-height: 44rpx;

    view:first-child {
      display: flex;
    }

    text {
      color: #9197ae;
    }

    image:first-child {
      width: 44rpx;
      height: 44rpx;
      margin-right: 16rpx;
    }

    image:nth-child(2) {
      width: 32rpx;
      height: 32rpx;
      margin: 6rpx 0 0 16rpx;
      transform: rotate(-90deg);
    }
  }
}
</style>
